<template>
	<default-header-page-layout ref="page" title="托盘解绑" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<!-- page start -->
				<view class="generic-unbind-page-content">
					<view class="top-view">
						<scan-input-form-item
							label="托盘编码"
							v-model="form.container"
							:msg="msg.container"
							:msg-type="msgType.container"
							@search="onSearch"
							@clear="onClearContainer"
						/>
						<view class="materials-box">
							<view class="materials-box-top" v-if="list.length>0">
								<view class="box-top">
									<view class="line"></view>
									<view class="title">
										<text class="text">物料详情</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="list-view">
						<view class="materials-box" v-if="list.length>0">
							<view class="material-item-group">
								<view class="material-list-item" v-for="(item,index) in list" :key="'material-list-item-'+index">
									<view class="badge-box"><u-badge :value="list.length-index" bg-color="#F18201" /></view>
									<view class="item-row">
										<view class="label">物料编号：</view>
										<view class="content auto-wrap">{{item.materialno}}</view>
									</view>
									<view class="item-row">
										<view class="label">物料名称：</view>
										<view class="content auto-wrap">{{item.materialname}}</view>
									</view>
									<view class="item-row">
										<view class="label">尺寸：</view>
										<view class="content auto-wrap">{{item.materialspec}}</view>
									</view>
									<view class="item-row">
										<view class="label">密度：</view>
										<view class="content auto-wrap">{{item.materialDensity}}</view>
									</view>
									<view class="item-row">
										<view class="label">批次号：</view>
										<view class="content auto-wrap">{{item.materialbatch}}</view>
									</view>
									<view class="item-row">
										<view class="label">数量：</view>
										<view class="content auto-wrap">{{item.bindquantity}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- page end -->
			</view>
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<div class="btn-frame left-btn-frame"><u-button text="重 置" @click="onReset"></u-button></div>
				<div class="btn-frame right-btn-frame"><u-button type="primary" text="确 定" :disabled="(!container || container.containerStatus!==2)" @click="onConfirm"></u-button></div>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import { $successInfo, parseDic } from '@/static/js/utils/index.js'
let initInterVal = null;
const defaultForm = {
	container:''
}
export default {
	name:'genericUnbindPage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem},
	data(){
		return {
			pageBodyHeight:0,
			form:{...defaultForm},
			msg:{
				container:''
			},
			msgType:{
				container:'error'
			},
			container:null,
			list:[]
		}
	},
	methods:{
		/* 托盘编码搜索 */
		onSearch(){
			if (!this.form.container) {
			  this.msgType.container = 'error'
			  this.msg.container = '请输入托盘号！';
			  return false;
			}
			this.msg.container = '';
			this.getData()
		},
		/* 清除托盘编码 */
		onClearContainer(){
			this.resetContainer()
		},
		/* 重置托盘编码 */
		resetContainer(){
			this.form.container = ''
			this.msg.container = ''
			this.clearBackContainer()
		},
		clearBackContainer(){
			this.container = null
			this.list = []
		},
		/* 获取托盘信息 */
		getData(){
			const __setErrMessage = function(__msg) {
				if (!__msg) {
					__msg = '网络错误，请稍后再尝试！'
				}
				this.msgType.container = 'error'
				this.msg.container = __msg;
			}.bind(this)
			let params = {ContainerCode:this.form.container}
			this.$api.get('ContainerInformation',params,{block:'generic',fullRes:true,warn:false}).then((d)=>{
				if (d.data) {
					if (d.data.wmsContainer) {
						this.container = d.data.wmsContainer
						this.list = d.data.wmsMaterials || []
						let _temp1 = parseDic(this.$store,'container_status',this.container.containerStatus)
						this.msgType.container = 'info'
						this.msg.container = `尺寸：${this.container.specLength}*${this.container.specWidth}，状态：${_temp1}`
					} else {
						this.clearBackContainer()
						__setErrMessage(d.message)
					}
				} else {
					this.clearBackContainer()
					__setErrMessage(d.message)
				}
			}).catch((_errmsg)=>{
				this.clearBackContainer()
				__setErrMessage(_errmsg)
				this.container = null;
			})
		},
		/* 响应重置按钮 */
		onReset(){
			this.resetContainer()
		},
		/* 响应确认按钮 */
		onConfirm(){
			this.dealSubmit((f)=>{
			  if (f) {
					this.resetContainer()
			    $successInfo('解绑成功！');
			  } 
			})
		},
		/* 解绑接口调用 */
		dealSubmit(callback){
			let params = {
			  ContainerCode:this.container.containerCode
			}
			this.$api.post('UnbindContainer',params,{block:'generic'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.bottom-btns-row{
	display: flex;
	padding: 10rpx 0;
	background-color: #fff;
	.btn-frame{
		width: 50%;
		box-sizing: border-box;
	}
	.left-btn-frame{
		padding-left: 20rpx;
		padding-right: 8rpx;
	}
	.right-btn-frame{
		padding-right: 20rpx;
		padding-left: 8rpx;
	}
}
.generic-unbind-page-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-view{
		flex-shrink: 0;
	}
	.list-view {
		height: 1px;
		flex-grow: 1;
		overflow: auto;
	}
	.materials-box{
		padding: 0 16rpx;
	}
	.materials-box-top{
		padding-top: 12rpx;
		.box-top {
			position: relative;
			height: 50rpx;
			display: flex;
			align-items: center;
			background-color: $uni-bg-color;
			&>.line{
				width: 100%;
				height: 2rpx;
				background-color: $uni-border-color;
			}
			&>.title{
				position: absolute;
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
				&>.text{
					font-size: 30rpx;
					background-color: $uni-bg-color;
					color: $uni-border-color;
					padding: 4rpx 12rpx;
				}
			}
		}
	}
}
.material-item-group{
	padding: 0 4rpx;
	background-color: $uni-bg-color;
	.material-list-item{
		border-bottom: 2rpx solid $uni-border-color;
		padding-bottom: 10rpx;
		padding-left: 60rpx;
		margin-bottom: 10rpx;
		position: relative;
		&:last-child{
			border-bottom: 0;
		}
		.item-row{
			display: flex;
			&>.label{
				flex-shrink: 0;
				color: $u-tips-color;
				width: 144rpx;
			}
			&>.content{
				flex-grow: 1;
				color: $u-content-color;
			}
		}
		.badge-box{
			position: absolute;
			top:8rpx;
			left: 8rpx;
			z-index: 1;
		}
	}
}
</style>